<template>
	<view class="baseInfo">
		<u-form :model="dataForm" ref="uForm">
			<u-form-item label="开户类型" label-width='220' required>
				<u-radio-group v-model="dataForm.subject_type" @change="onSubjectChange">
					<u-radio v-for="(item, index) in subjectRadioList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="经营类目" label-width='220' prop="qualification_type" required>
				<u-input v-model="dataForm.qualification_type" input-align='right' @click='onType' type="select"
					placeholder="请选择经营类目" />
			</u-form-item>
			<u-form-item label="优惠活动率" label-width='220' v-if="[716,719].includes(dataForm.activities_id)"
				prop="activities_rate" required>
				<u-input v-model="dataForm.activities_rate" input-align='right' placeholder="请输入活动费率" />
			</u-form-item>




			<u-form-item label="统一社会信用代码" label-width='220' prop="license_number" required>
				<u-input v-model="dataForm.license_number" input-align='right' placeholder="请输入统一社会信用代码" />
			</u-form-item>
			<u-form-item label="客服电话" label-width='220' prop="service_phone" required>
				<u-input v-model="dataForm.service_phone" input-align='right' placeholder="请输入客服电话" />
			</u-form-item>


			<u-form-item label="商户名称" label-width='220' prop="merchant_name" required>
				<u-input v-model="dataForm.merchant_name" input-align='right' placeholder="请输入商户名称" />
			</u-form-item>
			<u-form-item label="商户简称" label-width='220' required prop="merchant_shortname">
				<u-input v-model="dataForm.merchant_shortname" input-align='right' placeholder="请输入商户简称" />
			</u-form-item>
			<u-form-item label="线下场所名称" label-width='220' prop="biz_store_name" required>
				<u-input v-model="dataForm.biz_store_name" input-align='right' placeholder="请输入线下场所名称" />
			</u-form-item>
			<u-form-item label="所在地区" label-width='220' v-if="sumbitShow" prop="biz_address_code" required>
				<u-input v-model="areaName" input-align='right' type="select" placeholder="请选择地区" @click='goSelect' />
			</u-form-item>

			<u-form-item label="线下场所地址" label-width='220' prop="biz_store_address" required>
				<u-input v-model="dataForm.biz_store_address" input-align='right' placeholder="请输入线下场所地址" />
			</u-form-item>


			<u-form-item label="门店门头照片" label-width='220' prop="store_entrance_pic" required>
				<view @click="onUpload('store_entrance_pic')">
					<view class="baseInfo_img" v-if="!dataForm.store_entrance_pic">+</view>
					<image class="baseInfo_img" :src="dataForm.store_entrance_pic" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>
			<u-form-item label="门店环境照片" label-width='220' prop="indoor_pic" required>
				<view @click="onUpload('indoor_pic')">
					<view class="baseInfo_img" v-if="!dataForm.indoor_pic">+</view>
					<image class="baseInfo_img" :src="dataForm.indoor_pic" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>
			<u-form-item label="营业执照" label-width='220' prop="license_copy" required>
				<view @click="onUpload('license_copy')">
					<view class="baseInfo_img" v-if="!dataForm.license_copy">+</view>
					<image class="baseInfo_img" :src="dataForm.license_copy" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>
		</u-form>
		<u-button type="error" @click="onSubmit">下一步</u-button>
		<u-select v-model="settlementShow" :list="settlementList" @confirm='onSettlementConfirm'></u-select>
		<addressSelect ref='addressSelectRef' @callback='onAddressCallback' />
	</view>
</template>

<script>
	import weChatMxins from '../../mxins/index.js'
	import addressSelect from '../../../components/addressSelect.vue'
	export default {
		components: {
			addressSelect
		},
		mixins: [weChatMxins],
		data() {
			return {
				dataForm: {
					subject_type: 'SUBJECT_TYPE_INDIVIDUAL', //主体类型
					license_copy: '', //营业执照
					license_number: '', //注册号 / 统一社会信用代码
					merchant_name: '', //商户名称
					biz_store_name: '', //线下场所名称
					biz_store_address: '', //线下场所地址
					biz_address_code: '', //线下场所省市编码
					store_entrance_pic: '', //线下场所门头照片
					indoor_pic: '', //线下场所内部照片
					merchant_shortname: '', //商户简称
					service_phone: '', //客服电话
					settlement_id: '', //入驻结算规则ID
					qualification_type: '', //所属行业
					activities_id: '', //优惠费率活动ID
					activities_rate: 0.38, //优惠费率活动值
				},
				areaName: '',
				settlementList: [],
				settlementShow: false,
				merchantList: [{ //企业
						label: '餐饮',
						value: 0,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '食品生鲜',
						value: 1,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '电信运营商/宽带收费',
						value: 2,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '私立/民营医院/诊所',
						value: 3,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '保健器械/医疗器械/非处方药品',
						value: 4,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '游艺厅/KTV',
						value: 5,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '机票/票务代理',
						value: 6,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '宠物医院',
						value: 7,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '房地产',
						value: 8,
						pk_id: 716,
						rate: 0.6,
					},

					{
						label: '共享服务',
						value: 9,
						pk_id: 716,
						rate: 0.6,
					},

					{
						label: '文物经营/文物复制品销售',
						value: 10,
						pk_id: 716,
						rate: 0.6,
					},

					{
						label: '旅行社',
						value: 11,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '培训机构',
						value: 12,
						pk_id: 716,
						rate: 0.6,
					},
					{
						label: '保险业务',
						value: 13,
						pk_id: 715,
						rate: 0.6,
					},
					{
						label: '众筹',
						value: 14,
						pk_id: 714,
						rate: 0.6,
					},
					{
						label: '物流',
						value: 15,
						pk_id: 717,
						rate: 0.3,
					},
					{
						label: '加油/加气',
						value: 16,
						pk_id: 717,
						rate: 0.3,
					},
					{
						label: '民办学校（非全国高等学校）',
						value: 17,
						pk_id: 717,
						rate: 0.3,
					},
				],
				individualList: [{ //个人
						label: '保健器械/医疗器械/非处方药品',
						value: 0,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '游艺厅/KTV/网吧',
						value: 1,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '机票/机票代理',
						value: 2,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '宠物医院',
						value: 3,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '培训机构',
						value: 4,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '零售批发/生活娱乐/其他',
						value: 5,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '话费通讯',
						value: 6,
						pk_id: 720,
						rate: 0.6,
					},
					{
						label: '门户论坛/网络广告及推广/软件开发/其他',
						value: 7,
						pk_id: 746,
						rate: 1,
					},
					{
						label: '游戏',
						value: 8,
						pk_id: 746,
						rate: 1,
					},
					{
						label: '加油',
						value: 9,
						pk_id: 721,
						rate: 0.3,
					},
					{
						label: '餐饮',
						value: 10,
						pk_id: 719,
						rate: 0.6,
					},
					{
						label: '食品生鲜',
						value: 11,
						pk_id: 719,
						rate: 0.6,
					},
				],
				subjectRadioList: [{
						name: '企业',
						value: 'SUBJECT_TYPE_ENTERPRISE',
						disabled: false
					},
					{
						name: '个体工商',
						value: 'SUBJECT_TYPE_INDIVIDUAL',
						disabled: false
					}
				],
				rules: {
					store_entrance_pic: {
						required: true,
						message: '请选择门头图片',
						trigger: 'change',
					},
					biz_address_code: {
						required: true,
						message: '请选择地区',
						trigger: 'change',
					},

					indoor_pic: {
						required: true,
						message: '请选择店内图片',
						trigger: 'change',
					},
					license_copy: {
						required: true,
						message: '请选择营业图片',
						trigger: 'change',
					},
					qualification_type: {
						required: true,
						message: '请选择经营类目',
						trigger: 'change',
					},

					license_number: {
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur',
					},

					biz_store_name: {
						required: true,
						message: '请输入线下场所名称',
						trigger: 'blur',
					},

					biz_store_address: {
						required: true,
						message: '请输入线下场所地址',
						trigger: 'blur',
					},

					service_phone: {
						required: true,
						message: '请输入客服电话',
						trigger: 'blur',
					},

					merchant_shortname: {
						required: true,
						message: '请输入商户简称',
						trigger: 'blur',
					},
					merchant_name: {
						required: true,
						message: '请输入商户名称',
						trigger: 'blur',
					},
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.settlementList = this.individualList
		},


		methods: {

			onSubmit() {
				let {
					dataForm
				} = this
				let {
					activities_rate,
					settlement_id
				} = dataForm

				if (!this.sumbitShow) {
					this.$emit('stepsCallback', 1)
					return
				}

				this.$refs.uForm.validate(valid => {
					if (!valid) return
					if ([716, 719].includes(settlement_id)) {
						this.dataForm.activities_id = '20191030111cff5b5e'
						if (!activities_rate || activities_rate < 0.2 || activities_rate > 0.6) return this.$toast(
							'优惠费率再0.2-0.6之间')
						this.$emit('stepsCallback', 1)
					} else {
						this.dataForm.activities_id = ''
						this.dataForm.activities_rate = ''
						this.$emit('stepsCallback', 1)
					}
				})
			},

			onAddressCallback(val) {
				let {
					city,
					province,
					region
				} = val
				this.areaName = `${province.label}-${city.label}-${region.label}`
				this.dataForm.biz_address_code = province.value
				console.log(val)
			},


			onSettlementConfirm(val) {
				let dataObj
				if (this.dataForm.subject_type == 'SUBJECT_TYPE_INDIVIDUAL') { //个人
					dataObj = this.individualList.find(el => el.value == val[0].value)
				} else {
					dataObj = this.merchantList.find(el => el.value == val[0].value) //企业
				}
				this.dataForm.settlement_id = dataObj.pk_id
				this.dataForm.qualification_type = dataObj.label
			},
			onSubjectChange(val) {
				this.dataForm.qualification_type = ''
				this.dataForm.settlement_id = ''
				if (val == 'SUBJECT_TYPE_INDIVIDUAL') { //个人
					this.settlementList = this.individualList
					return
				}
				// 企业
				this.settlementList = this.merchantList
			},

			onType() {
				this.settlementShow = true
			},


		}
	};
</script>

<style lang="scss" scoped>
	.baseInfo {
		padding: 0 35rpx;
		background-color: #ffffff;
		margin-top: 50rpx;

		.baseInfo_img {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid rgba(0, 0, 0, .1);
			margin-left: auto;
			color: #999999;
			font-size: 45rpx;
		}
	}
</style>
